<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航条</title>
    <style>
        body{
            height: 1000px;
        }
        ul,li,a{
            /* 去除边框外 */
            border: 0;
            /* 去除外边距 */
            margin: 0;
            /* 去除内边距 */
            padding: 0;
            /* 去掉li前面的点点 */
            list-style: none;
        }
        .DH{
            /* 设置父元素宽高 */
            width: 1210px;
            height: 49px;
            /* 父元素背景 */
            background-color: rgb(232,231,227);
            /* 父元素居中 */
            margin: 50px auto;

            /* 
                粘滞定位：
                    -  元素的position 设置sticky开启
                    -  粘滞定位和想定位的特点基本一致
                        不同的是粘滞定位可以在元素到达某个位置时将其固定
            */
            position: sticky;
            top: 0;
        }

        .DH li{
            /* 设置左浮动 让纵向排列  转为横向排列 */
            float: left;
            /* 让文字和在父元素中居中 */
            line-height: 49px;
        }
        .DH li a{
            /* 去除a标签的下划线 */
            text-decoration: none;
            /* 让a标签撑开 变成块元素 文字以外的部分也可以点击 */
            float: left;
            padding: 0px 44px;
            color: rgb(122,122,122);
        }
        /* 设置鼠标点击样式 */
        .DH li a:hover{
            /* 鼠标移动的背景色 */
            background-color: rgb(63,63,63);
            /* 鼠标移动后的字体颜色 */
            color: #fff;
        }

        /* 设置最后一个标签的大小 */
        .DH li a:last-child{
            padding: 0 45px 0 44px;
        }

    </style>
</head>
<body>
    <ul class="DH">
        <li DH_LI><a href="#">HTML/CSS</a></li>
        <li DH_LI><a href="#">Browser Side</a></li>
        <li DH_LI><a href="#">Server Side</a></li>
        <li DH_LI><a href="#">Programming</a></li>
        <li DH_LI><a href="#">XML</a></li>
        <li DH_LI><a href="#">Web Building</a></li>
        <li DH_LI><a href="#">Reference</a></li>
    </ul>
</body>
</html>